<template>
    <div class="attr-list">
        <CommonAttr></CommonAttr>
        <el-form>
            <el-form-item label="标题">
                <el-input v-model="curComponent.propValue.title" type="textarea" :rows="3" />
            </el-form-item>
            <el-form-item label="圆角">
                <el-input v-model="curComponent.propValue.border" placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="背景颜色">
                <el-color-picker v-model="curComponent.propValue.color" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item label="标题颜色(点击空白实时效果)">
                <el-color-picker v-model="curComponent.propValue.titleColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="用户信息">
                <el-select v-model="curComponent.propValue.userList" filterable placeholder="请选择">
                    <el-option v-for="(item, index) in userList" :key="index" :label="item.nickName"
                        :value="item.userId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态字体大小">
                <el-input-number v-model="curComponent.propValue.statuSize" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="名字字体大小">
                <el-input-number v-model="curComponent.propValue.nameSize" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="简介字体大小" v-if="curComponent.propValue.isMuchMan == 0">
                <el-input-number v-model="curComponent.propValue.remarkSize" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="名字字体颜色">
                <el-color-picker v-model="curComponent.propValue.nameColor" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item label="状态字体颜色">
                <el-color-picker v-model="curComponent.propValue.statuColor" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item label="简介字体颜色" v-if="curComponent.propValue.isMuchMan == 0">
                <el-color-picker v-model="curComponent.propValue.remarkColor" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <!-- <el-form-item label="简介字体颜色">
                <el-color-picker v-model="curComponent.propValue.remarkColor"></el-color-picker>
            </el-form-item> -->
            <el-form-item label="人照宽">
                <el-input-number v-model="curComponent.propValue.avatarWidth" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="人照高">
                <el-input-number v-model="curComponent.propValue.avatarHeight" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="轮播间隔时间">
                <el-input-number v-model="curComponent.propValue.interval" :min="1"></el-input-number>
            </el-form-item>

        </el-form>
    </div>
</template>

<script>
import CommonAttr from '../common/CommonAttr.vue'
import { listUser } from "@/api/system/user";
export default {
    components: { CommonAttr },
    computed: {
        curComponent() {
            return this.$store.state.curComponent
        },
    },
    data() {
        return {
            userList: [],
            predefineColors: [
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577'
            ]
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        /** 查询用户列表 */
        getList() {
            listUser({
                pageNum: 1,
                pageSize: 999,
                nickName: undefined
            }).then(response => {
                this.userList = response.rows;
            })
        },
    }
}
</script>
